<div class="data_migration__main">
    <cly-header>
        <template v-slot:header-left>
          <h2> {{ i18n('data-migration.page-title') }}</h2>
          &nbsp; <cly-tooltip-icon icon="ion-help-circled"></cly-tooltip-icon>
        </template>
        <template v-slot:header-right>
            <cly-more-options v-if="canUserCreate" @command="handleCommand">
                <template v-slot:trigger>
                    <el-button type="success">
                        <i class="el-icon-circle-plus"></i>
                        {{ i18n('data-migration.import-export-button-title') }} 
                    </el-button>
                </template>
                <el-dropdown-item command="export">{{ i18n('data-migration.export-data') }}</el-dropdown-item>
                <el-dropdown-item command="import">{{ i18n('data-migration.import-data') }}</el-dropdown-item>
            </cly-more-options>
        </template>
        <template v-slot:header-tabs>
            <cly-dynamic-tabs
                v-model="dynamicTab"
                skin="secondary"
                :tab="dynamicTab"
                :tabs="tabs">
                <template v-slot:tables="scope">
                    <span>{{ scope.tab.title }}</span>
                </template>
            </cly-dynamic-tabs>
        </template>
    </cly-header>
    <import-drawer :settings="drawerSettings.import" :controls="drawers.import"></import-drawer>
    <export-drawer :settings="drawerSettings.export" :controls="drawers.export"></export-drawer>
</div>